<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
	<meta charset="UTF-8">

	<meta name="description" content="">
	<meta name="keywords" content="">

	<title></title>

	<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
	<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">

	<script src="/js/jquery-1.7.2.min.js" ></script>
	<script src="/js/html5.js" ></script>
	<script src="/js/jflow.plus.js" ></script>
	<script src="/js/jquery.carouFredSel-5.2.2-packed.js"></script>
	<script src="/js/checkbox.js"></script>
	<script src="/js/radio.js"></script>
	<script src="/js/selectBox.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/element.js"></script>

	<style type="text/css">

	</style>
	<script>
        $(document).ready(function() {
            $("select").selectBox();
        });
	</script>

	<script>
        $(document).ready(function(){
            function collection(){
                window.location.href = "/collect/getCollect?userId="+sessionStorage.getItem("userId");
            }
            $("#myController").jFlow({
                controller: ".control", // must be class, use . sign
                slideWrapper : "#jFlowSlider", // must be id, use # sign
                slides: "#slider",  // the div where all your sliding divs are nested in
                selectedWrapper: "jFlowSelected",  // just pure text, no sign
                width: "984px",  // this is the width for the content-slider
                height: "480px",  // this is the height for the content-slider
                duration: 400,  // time in miliseconds to transition one slide
                prev: ".slidprev", // must be class, use . sign
                next: ".slidnext", // must be class, use . sign
                auto: true
            });
        });
	</script>
	<script>
        $(function() {
            $('#list_product').carouFredSel({
                prev: '#prev_c1',
                next: '#next_c1',
                auto: false
            });
            $('#list_product2').carouFredSel({
                prev: '#prev_c2',
                next: '#next_c2',
                auto: false
            });
            $(window).resize();
        });
	</script>
	<script>
        $(document).ready(function(){
            $("button").click(function(){
                $(this).addClass('click')
            });
        })
	</script>
	<script type="text/javascript">
        $(function () {
            var search = $(".entry_form").val()== undefined ? '': $(".entry_form").attr("value").trim();
            var type = $(".left_menu_a").attr("value")== undefined ? '': $(".left_menu_a").attr("value").trim(); // 类型默认第一个元素
            type="";
            var sortWay = $(".sortItem option:selected").text()== undefined ? '': $(".sortItem option:selected").text().trim();	// 排序方式
            var showNumber = $(".showNumber option:selected").text()== undefined ? '': $(".showNumber option:selected").text().trim();	// 显示条数,默认显示6条
            var pagination = $(".pagination_a").html()== undefined ? '': $(".pagination_a").html().trim();; // 第几页，默认第一页

            // 类型点击
            $(".left_menu_a").each(function () {
                $(this).click(function () {
                    //  当前点击的类型id
                    type = $(this).attr("value");
                    requestGoodsByCondition();
                })
            });

            //搜索框事件
            $(".search").keypress(function (even) {
                if (even.which == 13) {
                    search =$(this).val();
                    requestGoodsByCondition();
                }
            });

            // 排序方式改变
            $(".sortItem").change(function () {
                sortWay = $(".sortItem option:selected").text();
                requestGoodsByCondition();
            });

            // 显示条数改变
            $(".showNumber").change(function () {
                showNumber = $(".showNumber option:selected").text();
                requestGoodsByCondition();
            });


            // 通过条件获取商品信息
            function requestGoodsByCondition() {
                $("#grid_product #grid_3").remove();//清除数据
                $("#pagination ul").remove();//清除分页
                //封装方法
                var r ;//数据
                var numbers;//分页数据
                var conditionData = {
                    "search":search,//搜索
                    "typeName": type,
                    "sortWay": sortWay,
                    "pageNumber": showNumber,    // 分几页
                    "startPage": pagination     // 从第几页开始

                };
                var conditionDataJSON = JSON.stringify(conditionData);
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: '/goods/getGoodsHotByConditionAndPage',
                    data: conditionDataJSON,
                    contentType: "application/json",
                    cache: false,
                    async: true,
                    success: function (data) {

                        /**
                         *
                         * 所有分页带条件的数据在data里面
                         */
                        //清空原来,保留头部信息
                        if (data.list!=null || data.list!=""){
                            r=data.list;
                            for (var i = 0; i < r.length; i++) {
                                console.log(r[i].gname);
                                var  newPrice =(r[i].price*1.2).toFixed(2);
                                $("#grid_product").append('<div class="grid_3 product" id="grid_3"><div class="prev"><a href="javaScript:void(0);" class="getByGoodsId" alt="'+r[i].gid+'"><img src="'+
                                    r[i].gimage+'" alt="" title="" /></a></div><h3 class="title">'+
                                    r[i].gname+'</h3><div class="cart"><div class="price"><div class="vert"><div class="price_new">￥'+
                                    r[i].price+'</div><div class="price_old">￥'+
                                    newPrice+'</div></div></div><a href="javascript:void(0);" class="obn"></a><a href="javascript:void(0);" class="bay" alt="'+
                                    r[i].gid+'"></a><a href="javascript:void(0);" class="like"'+
                                    r[i].gid+'></a></div></div>');
                            }
                            /*收藏*/
                            $(".like").click(function () {
                                var uid=sessionStorage.getItem("userId");
                                var  gid =$(this).attr("alt");
                                //一种
                                var json={
                                    "gid":gid,
                                    "userId":uid
                                };
                                $.post("/collect/addLike",json,function(r){
                                    console.log(r);
                                    if(r=="ok"){
                                        alert("收藏成功！！！！！");
                                    }else if (r=="err") {
                                        var flag =confirm('请登陆！！！！！！！');
                                        if (flag) {
                                            window.location.href="/qd/login.html";
                                        }
                                    }else{
                                        alert("收藏失败！！！！！！！！！");


                                    }

                                },"text");


                            });
                            /***
                             * 加入购物车
                             */
                            $(".bay").click(function () {
                                var uid=sessionStorage.getItem("userId");
                                var  gid =$(this).attr("alt");
                                //一种
                                var json={
                                    "gid":gid,
                                    "userId":uid
                                };
                                $.post("/shoppingcart/addShopping",json,function(r){
                                    if(r=="ok"){
                                        alert("成功加入购物车！！！！！");
                                    }else if (r=="err") {
                                        var flag =confirm('请登陆！！！！！！！');
                                        if (flag) {
                                            window.location.href="/qd/login.html";
                                        }
                                    }else{
                                        alert("加入购物车失败！！！！！！！！！");


                                    }

                                },"text");


                            });

                            /*
                            分页数据绑定
                             */
                            if(data.navigatepageNums!=null || data.navigatepageNums!="") {
                                var i=0;
                                numbers =data.navigatepageNums;
                                var html ='<ul><li class="prev prefix_1next" value="'+data.prePage+'"><span>&#8592;</span></li>';
                                if(data.pageNum>1){
                                    i=data.pageNum-1;
                                }
                                for (i ; i < numbers.length; i++) {
                                    if (numbers[i]==data.pageNum) {
                                        html+='<li class="curent" ><a href="javaScript:void (0);" class="pagination_a">'+numbers[i]+'</a></li>';
                                    }
                                    if (numbers[i]>=(data.pageNum+3)) {
                                        html+=' <li><span disabled ="disabled">...</span></li>';
                                        html+='<li><a href="javaScript:void (0);" class="pagination_a">'+numbers[i]+'</a></li>';
                                        break;
                                    }else {
                                        if (numbers[i]!=data.pageNum) {
                                            html+='<li ><a href="javaScript:void (0);"  class="pagination_a">'+numbers[i]+'</a></li>';
                                        }
                                    }
                                }
                                html+='<li class="next prefix_1next" value="'+data.nextPage+'"><a href="javaScript:void (0);">&#8594;</a></li></ul>';

                                $("#pagination").append(html);

                                // 第几页改变
                                $(".pagination_a").each(function () {
                                    $(this).click(function () {
                                        pagination = $(this).html();
                                        $(this).parent().addClass('curent');
                                        requestGoodsByCondition();
                                    })
                                });
                                $(".prefix_1next").click(function () {
                                    pagination = $(this).attr("value");
                                    if (pagination==0) {
                                        alert("这是第一页啦！");
                                    }else  if(pagination==numbers[numbers.length]){
                                        alert("这是最后一页啦！");
                                    } else {
                                        requestGoodsByCondition();
                                    }
                                });

                                / * 商品详情*/
                                $(".getByGoodsId").click(function () {
                                    var  gid =$(this).attr("alt");
                                    window.location.href="/goods/getByIdGoods?id="+gid;
                                });

                            }

                        }else{

                        }
                        console.log(data);
                    }
                });
            }
            requestGoodsByCondition();

            /**
             * 特价商品
             */
            $("#specials ul").remove();//清除
            $.ajax({
                type: 'post',
                dataType: 'json',
                contentType: "application/json",
                url: '/goods/getGoodsListT',
                cache: false,
                async: true,
                success: function (data) {
                    if (data!=null || data!=""){
                        for (var i=0;i<data.length;i++){
                            var  newPrice =(data[i].price*0.8).toFixed(2);
                            console.log(newPrice)
                            $("#specials").append('<ul><li><div class="prev"><a href="javaScript:void(0);" class="getByGoodsId" alt="'+data[i].gid+'"><img src="'+
                                data[i].gimage+'" alt="" title="" /></a></div><div class="cont"><a href="javaScript:void(0);" class="getByGoodsId" alt="'+data[i].gid+'">' +
                                data[i].gname+'</a><div class="prise"><span class="old">￥' +
                                data[i].price+'</span>￥'+
                                newPrice+'</div></div></li></ul>')
                        }
                        / * 商品详情*/
                        $(".getByGoodsId").click(function () {
                            var  gid =$(this).attr("alt");
                            window.location.href="/goods/getByIdGoods?id="+gid;
                        });


                    } else {

                    }

                }

            });




        });
	</script>
<script>
    $(function () {
        var uid=sessionStorage.getItem("userId");
        var conditionData = {
            "userId":uid//用户编号
        };
        var conditionDataJSON = JSON.stringify(conditionData);
        $.ajax({
            type: 'post',
            url: "/shoppingcart/getListBayIndex",    // 提交到controller的url路径
            data: conditionDataJSON,
            contentType: "application/json",
            cache: false,
            async: true,
            success: function (data) {    // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值;;
                var jsonString = JSON.parse(data) ;
                if (jsonString.msg == "ok") {
                    $(".grid_6 #cart_nav li .cart_cont").remove();
                    $(".grid_6 #cart_nav li a.cart_li span").html(jsonString.sum+"件");
                    var r =jsonString.shoppingcartList;
                    var html ='<ul class="cart_cont"><li class="no_border"><p>最近添加的项目</p></li><li>';
                    for (var i=0;i<r.length;i++){
                        html +='<li><a href="javaScript:void(0);"alt="' +
                            r[i].goods.gid+'" class="prev_cart getByGoodsId"><div class="cart_vert"><img src="' +
                            r[i].goods.gimage+'" alt="" title="" /></div></a><div class="cont_cart"><h4>' +
                            r[i].goods.gname+'</h4><div class="price">￥' +
                            r[i].goods.price+'</div> </div> <a title="close" class="close" href="#"></a><div class="clear"></div></li>';

                    }
                    html+='<li class="no_border"> <a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a><a href="/qd/checkout.html" class="checkout">进行结账</a></li></ul>';
                    $(".grid_6 #cart_nav li").append(html);
                    /*
                    * 商品详情*/
                    $(".getByGoodsId").click(function () {
                        var  gid =$(this).attr("alt");
                        window.location.href="/goods/getByIdGoods?id="+gid;
                    });
                } else {
                    $(".grid_6 #cart_nav li .cart_cont").remove();
                    $('.grid_6 #cart_nav li .cart_li').click(function() {
                        alert("请登录！！！");

                    });
                }
            },
        });
    })
</script>

</head>
<body>
<div id="app">
	<div class="container_12">
		<div id="top">
			<div class="grid_3">
				<div class="phone_top">
					Call Us +777 (100) 1234
				</div><!-- .phone_top -->
			</div><!-- .grid_3 -->

			<div class="grid_6">
				<div class="welcome">
					<div v-if="!flag">欢迎访客，您可以<a href="/qd/login.html" style="color: #fe6400">登录</a> 或
						<a href="/qd/register.html" style="color: #fe6400">创建帐户</a>.</div>
					<div>
						<p v-if="flag" class="uids" >{{userName}} 欢迎访问坭兴陶推荐网<a style="color: #fe6400;margin-left: 10px;cursor: pointer" @click="goOut">退出</a></p>
					</div>
					<input id="userIdPut" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.uid}">
					<input id="userName" th:if="${session.userInfo!=null}" type="hidden" th:value="${session.userInfo.userName}">
				</div><!-- .welcome -->
			</div><!-- .grid_6 -->

			<div class="grid_3">
				<div class="valuta">
					<ul>
						<li class="curent"><a href="qd/customerService.html">客户服务</a></li>
					</ul>
				</div><!-- .valuta -->

				<div class="lang">
					<ul>
						<li class="curent"><a href="/qd/personCenter.html">个人中心</a></li>
						<li><a href="/qd/blog.html">关于我们</a></li>
						<li><a href="/qd/contact_us.html">联系我们</a></li>
					</ul>
				</div><!-- .lang -->
			</div><!-- .grid_3 -->
		</div><!-- #top -->

		<div class="clear"></div>

		<header id="branding">
			<div class="grid_3">
				<hgroup>
					<h1 id="site_logo" ><a href="/goods/index.html" title=""><img src="/images/logo.png" alt="钦州坭兴陶" width="200" height="80"/></a></h1>
					<h2 id="site_description">钦州坭兴陶</h2>
				</hgroup>
			</div><!-- .grid_3 -->

			<div class="grid_3">
				<form class="search">
					<input type="text" name="search" class="entry_form" value="" placeholder="找你想要的..."/>
				</form>
			</div><!-- .grid_3 -->

			<div class="grid_6">
				<ul id="cart_nav">
					<li>
						<a class="cart_li" href="javaScript:void(0);">购物车<span>￥0.00</span></a>
						<ul class="cart_cont">
							<li class="no_border"><p>最近添加的项目</p></li>
							<li class="no_border">
								<a href="/qd/shopping_cart.html" class="view_cart">查看购物车</a>
								<a href="/qd/shopping_cart.html" class="checkout">进行结账</a>
							</li>
						</ul>
					</li>
				</ul>

				<nav class="private">
					<ul>
						<li><a href="/qd/personCenter.html">我的账户</a></li>
						<li class="separator">|</li>
						<li><a href="javascript:ahref();">我的收藏</a></li>
						<li class="separator">|</li>
						<li><a href="/qd/orderInfo.html">我的订单</a></li>
						<li class="separator" v-if="!flag">|</li>
						<li v-if="!flag"><a href="/qd/login.html">登录</a></li>
						<li class="separator">|</li>
						<li v-if="!flag" ><a href="/qd/register.html">注册</a></li>
					</ul>
				</nav><!-- .private -->
			</div><!-- .grid_6 -->
		</header><!-- #branding -->
	</div><!-- .container_12 -->

<div class="clear"></div>

<div id="block_nav_primary">
	<div class="container_12">
		<div class="grid_12">
			<nav class="primary">
				<ul>
					<li ><a href="/goods/index.html">首页</a></li>
					<li><a href="/qd/all_catalog.html">全部宝贝</a></li>
					<li  class="curent"><a href="/qd/catalog_grid.html">热销推荐</a></li>
					<li><a href="/qd/compare.html">猜你喜欢</a></li>
					<li>
						<a href="/qd/catalog_list.html">新品推荐</a>
					</li>


					<li>
						<a href="#">更多精彩</a>
						<ul class="sub">
							<li><a href="/qd/contact_us.html">联系我们</a></li>
							<li><a href="/qd/blog.html">关于我们</a></li>

						</ul>
					</li>
				</ul>
			</nav><!-- .primary -->
		</div><!-- .grid_12 -->
	</div><!-- .container_12 -->
</div><!-- .block_nav_primary -->

<div class="clear"></div>
<section id="main">
	<div class="container_12">
		<div id="sidebar" class="grid_3" style="width: 228px;">
			<aside id="categories_nav">
				<h3>分类目录</h3>

				<nav class="left_menu">
					<ul>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="杯子">杯子</a></li>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="茶壶">茶壶 </a></li>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="四件套">四件套</a></li>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="方壶">方壶</a></li>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="花货">花货 </a></li>
						<li><a href="javaScript:void (0);" class="left_menu_a" value="筋纹器">筋纹器</a></li>
						<li class="last"><a href="javaScript:void (0);" class="left_menu_a" value="其他">其他</a></li>
					</ul>
				</nav><!-- .left_menu -->
			</aside><!-- #categories_nav -->

			<aside id="specials" class="specials">
				<h3>特价商品</h3>

				<ul>
					<li>
						<div class="prev">
							<a href="product_page.html"><img src="/images/goods/product_2.jpg" alt="" title="" /></a>
						</div>

						<div class="cont">
							<a href="product_page.html">钦州坭兴陶茶壶大容量刻字小号家用非紫砂泡茶壶茶具</a>
							<div class="prise"><span class="old">￥177.00</span>￥75.00</div>
						</div>
					</li>
				</ul>
			</aside><!-- #specials -->


		</div><!-- .sidebar -->

		<div id="content" class="grid_9">
			<h1 class="page_title">产品列表</h1>

			<div class="options">
				<div class="grid-list">
					<a class="grid curent" href="javaScript:void (0);"><span>img</span></a>
					<!--<a class="list" href="catalog_list.html"><span>img</span></a>-->
				</div><!-- .grid-list -->

				<div class="show">
					显示
					<select class="showNumber">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option selected ="selected">6</option>
						<option>7</option>
						<option>8</option>
						<option>9</option>
						<option>10</option>
						<option>11</option>
						<option>12</option>
					</select>

					条
				</div><!-- .show -->

				<div class="sort">
					排序方式
					<select class="sortItem">
						<option>全部</option>
						<option>价钱</option>
						<option>销量</option>
					</select>

					<a class="sort_up" href="javaScript:void (0);">&#8593;</a>
				</div><!-- .sort -->
			</div><!-- .options -->
			<div class="grid_product" id="grid_product">
				<div class="grid_3 product" id="grid_3">
					<div class="prev">
						<a href="product_page.html"><img src="images/product_1.jpg" alt="" title="" /></a>
					</div><!-- .prev -->
					<h3 class="title">钦州坭兴陶茶壶大容量刻字小号家用非紫砂泡茶壶茶具</h3>
					<div class="cart">
						<div class="price">
							<div class="vert">
								<div class="price_new">￥550.00</div>
								<div class="price_old">￥725.00</div>
							</div>
						</div>
						<a href="#" class="obn"></a>
						<a href="#" class="like"></a>
						<a href="#" class="bay"></a>
					</div><!-- .cart -->
				</div><!-- .grid_3 -->
			</div><!-- .grid_product -->
			<div class="clear"></div>

			<!--<div class="grid_product">

				&lt;!&ndash;加载数据&ndash;&gt;
				<div id="select" class="listing_product"></div>

				<div class="clear"></div>
			</div>--><!-- .grid_product -->

			<div class="pagination" id="pagination">
				<ul>
					<li class="prev"><span>&#8592;</span></li>
					<li class="curent"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><span>...</span></li>
					<li><a href="#">100</a></li>
					<li class="next"><a href="#">&#8594;</a></li>
				</ul>
			</div><!-- .pagination -->
		</div><!-- #content -->

		<div class="clear"></div>

	</div><!-- .container_12 -->
</section><!-- #main -->

<div class="clear"></div>


<footer>
	<div class="f_navigation">
		<div class="container_12">
			<div class="grid_3">
				<h3>联系我们</h3>
				<ul class="f_contact">
					<li>钦州湾广场</li>
					<li>+777 (100) 1234</li>
					<li>mail@example.com</li>
				</ul><!-- .f_contact -->
			</div><!-- .grid_3 -->

			<div class="grid_3">
				<h3>信息</h3>
				<nav class="f_menu">
					<ul>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">隐私政策</a></li>
						<li><a href="#">条款及细则</a></li>
						<li><a href="#">安全付款</a></li>
					</ul>
				</nav><!-- .private -->
			</div><!-- .grid_3 -->

			<div class="grid_3">
				<h3>顾客服务</h3>
				<nav class="f_menu">
					<ul>
						<li><a href="contact_us.html">联系方式</a></li>
						<li><a href="#">返回</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">网站地图</a></li>
					</ul>
				</nav><!-- .private -->
			</div><!-- .grid_3 -->
			<div class="clear"></div>
		</div><!-- .container_12 -->
	</div><!-- .f_navigation -->

	<div class="f_info">
		<div class="container_12" >
			<div class="grid_6" style="margin: 0 auto; width: 100%;">
				<p class="copyright" style="text-align: center;">© 钦州坭兴陶, 2020.07 </p>
			</div><!-- .grid_6 -->
			<div class="clear"></div>
		</div><!-- .container_12 -->
	</div><!-- .f_info -->
</footer>
</div>
<script>
    function ahref() {
        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            window.location.href = "/qd/collection.html";
        }else {
            alert("请先登录！")
        }
    }
    function seeCart(){
        if (sessionStorage.getItem("userId") != null && sessionStorage.getItem("userId") != "") {
            window.location.href = "/qd/shopping_cart.html";
        }else {
            alert("请先登录！")
        }
    }
    $(function() {
        var userId = $("#userIdPut").val();
        if (userId != null && userId != ""){
            sessionStorage.setItem("userId",userId);
            sessionStorage.setItem("userName",$("#userName").val());
        }

    });

    let vue = new Vue({
        el: '#app',
        data() {
            return {
                flag:false,
                userName:""
            }
        },
        methods:{
            getUserInfo(){
                let userId = sessionStorage.getItem("userId");
                if (userId != null && userId != ""){
                    this.flag=true
                    this.userName=sessionStorage.getItem("userName")
                }
            },
            goOut(){
                sessionStorage.removeItem("userId")
                sessionStorage.removeItem("userName")
                window.location.href="/goods/index.html"
            }
        },
        created(){
            this.getUserInfo()
        }
    })
</script>
</body>
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
</html>